<template>
  <div class="login-bg" :style="'background-image:url(' + bgimg_url + ');'">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-container d-b-c"
    >
      <div class="log_img">
        <img :src="left_url" />
      </div>
      <div class="flex-1 login-box">
        <h3 class="title" style="margin-bottom: 20px">{{ supplierName }}</h3>
        <!--用户名-->
        <el-form-item prop="account">
          <div class="left-img-input">
            <img class="l-img" src="/src/assets/img/user.png" />
            <el-input
              @keyup.enter.native="SubmitFunc"
              type="text"
              v-model="ruleForm.account"
              auto-complete="off"
              placeholder="帳號"
            ></el-input>
          </div>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="checkPass">
          <div class="left-img-input">
            <img class="l-img" src="/src/assets/img/password.png" />
            <el-input
              @keyup.enter.native="SubmitFunc"
              show-password
              type="password"
              v-model="ruleForm.checkPass"
              auto-complete="off"
              placeholder="密碼"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="code" style="line-height: 0px" v-if="codeImage">
          <div class="d-b-c">
            <div class="left-img-input" style="width: auto; margin-bottom: 0">
              <el-input
                v-model="ruleForm.code"
                ref="code"
                @keyup.enter.native="SubmitFunc"
                placeholder="驗證碼"
                class="l-input"
                style="width: 170px"
              ></el-input>
            </div>
            <div
              class="identifybox"
              style="height: 48px; flex-shrink: 0"
              @click="getData"
            >
              <el-image
                class="codeImage"
                style="width: 150px; height: 48px"
                :src="codeImage"
              />
            </div>
          </div>
        </el-form-item>
        <!--登录-->
        <el-form-item
          ><el-button
            type="primary"
            class="logins"
            @click.native.prevent="SubmitFunc"
            :loading="logining"
            >登錄</el-button
          ></el-form-item
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import IndexApi from "@/api/index.js";
import bgimg from "/static/imgs/login_bg.png";
import leftimg from "/static/imgs/login2.png";
import UserApi from "@/api/user.js";
import { useUserStore } from "@/store";
const {
  afterLogin
} = useUserStore();
export default {
  data() {
    return {
      /*是否正在加载*/
      loading: true,
      /*系统名称*/
      supplier_name: "",
      /*背景图片*/
      bgimg_url: "",
      left_url: "",
      /*是否正在提交*/
      logining: false,
      /*表单对象*/
      ruleForm: {
        /*用户名*/
        account: "",
        /*密码*/
        checkPass: ""
      },
      /*验证规则*/
      rules: {
        /*用户名*/
        account: [{
          required: true,
          message: "請輸入用戶名",
          trigger: "blur"
        }],
        /*密码*/
        checkPass: [{
          required: true,
          message: "請輸入密碼",
          trigger: "blur"
        }]
      },
      /*基础配置*/
      baseData: {},
      codeImage: "",
      codeKey: ""
    };
  },
  created() {
    this.getData();
  },
  methods: {
    /*获取基础配置*/
    getData() {
      let self = this;
      IndexApi.base(true).then(res => {
        self.loading = false;
        const {
          data
        } = res;
        self.supplierName = data.supplierName;
        self.codeImage = data.codeImage;
        self.codeKey = data.codeKey;
        if (data.supplierLogoImg && data.supplierLogoImg != "") {
          self.left_url = data.supplierLogoImg;
        } else {
          self.left_url = leftimg;
        }
        if (data.supplierBgImg != "") {
          self.bgimg_url = data.supplierBgImg;
        } else {
          self.bgimg_url = bgimg;
        }
      }).catch(error => {
        self.loading = false;
      });
    },
    /*登录方法*/
    SubmitFunc(ev) {
      var _this = this;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.logining = true;
          var Params = {
            username: this.ruleForm.account,
            password: this.ruleForm.checkPass,
            code: this.ruleForm.code,
            codeKey: this.codeKey
          };
          /*调用登录接口*/
          UserApi.login(Params, true).then(async res => {
            this.logining = false;
            if (res.code == 1) {
              await afterLogin(res);
              this.logining = false;
              this.$router.push({
                path: "/home"
              });
            } else {
              this.getData();
              ElMessage({
                message: "登錄失敗",
                type: "error"
              });
            }
          }).catch(error => {
            this.getData();
            //接口调用方法统一处理
            this.logining = false;
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
:deep( .el-input__wrapper) {
  box-shadow: none !important;
}

.logins {
  width: 100%;
  height: 44px;
  background: #409eff;
  border-radius: 5px;
}

.login-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.login-container {
  box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.1), 0 1px 0px 0 rgba(0, 0, 0, 0.04);
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  background-clip: padding-box;
  position: fixed;
  width: 896px;
  height: 408px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #ffffff;

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    font-size: 28px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }
}

.log_img {
  img {
    width: auto;
    height: 408px;
    border-radius: 10px 0 0 10px;
    display: block; /* 避免行内元素特有的空白间隙问题 */
    max-height: 100%;
  }
}

.login-box {
  padding: 45px 39px 31px 39px;
  height: 408px;
  box-sizing: border-box;
}

.left-img-input {
  width: 370px;
  height: 44px;
  line-height: 44px;
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 14px;
  // margin-bottom: 10px;

  .l-img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    flex-shrink: 0;
  }

  .l-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 14px;
    color: #666666;
  }

  .el-input__inner {
    border: none;
    padding: 0;
  }
}

.codeImage {
  cursor: pointer;
  margin-left: 20px;
}
</style>

